<template>
  <div class="sort">
    <div class="content_catag_container">
      <h2 class="content_catag_title">{{ data.title }}</h2>
      <p>这家伙很懒，还没填写该栏目的介绍呢~</p>
    </div>

    <List v-for="(item,index) in list" :key="index" :list="item" />
    <div class="pages">
      <Page :total="page.count" :page-size="page.pageSize" show-total @on-change="PageChange" />
    </div>
  </div>
</template>

<script>
import List from "~/components/list.vue";
export default {
  data() {
    return {
      list: "",
      page: {
        pageSize: 2, // 一页显示多少条
        page: 1, // 当前在第几页
        count: 0 // 总条数
      },
      data:'',
    };
  },
  components: {
    List
  },
  created() {
    this.$axios
      .$get(`/api/web/nav/${this.$route.params.id}?page=${this.page.page}&pageSize=${this.page.pageSize}`)
      .then(con => {
        this.list = con.data
        // this.data = con.data
      });
  },
  methods: {
    PageChange(con) {
      this.page.size = con;
      this.$axios
        .get(`/api/web/nav/${this.$route.params.id}?page=${this.page.page}&pageSize=${this.page.pageSize}`)
        .then(con => {
          this.list = con.con;
          this.page.total = con.total;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.content_catag_container {
  margin: 0;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #eaeaea;
  margin-bottom: 15px;
  p {
    color: #999;
  }
}
.content_catag_title {
  font-size: 18px;
  line-height: 22px;
  margin: 0;
  padding: 0;
}
.pages {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}
</style>
